<template>
    <div class="myCourseView">
        <div class="title">
            <div class="screen">
                <span class="screenText">筛选</span>
                <div class="filter">
                    <div class="filterItem">
                        <label>
                            <input type="radio" value="all" name="loginType" v-model="courseFilter" @change="getFilterCourse"/>
                            <span>全部课程</span>
                        </label>
                    </div>
                    <div class="filterItem">
                        <label>
                            <input type="radio" value="join" name="loginType" v-model="courseFilter" @change="getFilterCourse"/>
                            <span>我加入的课程</span>
                        </label>
                    </div>
                    <div class="filterItem">
                        <label>
                            <input type="radio" value="create" name="loginType" v-model="courseFilter" @change="getFilterCourse"/>
                            <span>我创建的课程</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="buttons">
                <router-link class="button" to="/course">
                    <span class="iconfont icon-likesprograma-shangyibu1"></span>
                    加入课程
                </router-link>
                <div class="button" @click="createCourse">
                    <span class="iconfont icon-likesprogramplus"></span>
                    创建课程
                </div>
            </div>
        </div>
        <div class="content">
            <div class="courseList" v-if="courseList.length > 0">
                <div class="courseGrid">
                    <CourseCard v-for="course in courseList" class="courseCard"
                        :key="course" :courseId="course.courseId" detailsUrl="/course/courseDetails"
                        @deleteEvent="(courseId)=>{ console.log('删除事件：' + courseId) }"
                        @editEvent="(courseId)=>{ console.log('编辑事件：' + courseId) }"
                        :editMode="true"
                        @collectEvent="(courseId)=>{ console.log('收藏事件：' + courseId) }"
                        :boxWidth="270" />
                </div>
            </div>
            <div class="empty" v-else>暂&nbsp;&nbsp;无&nbsp;&nbsp;课&nbsp;&nbsp;程</div>
            <!-- 分页 -->
            <!-- <div class="pagination">
                <Pagination ref="pagination"
                    v-model:currentPage="currentPage" v-model:pageSize="pageSize" v-model:total="total"
                    />
            </div> -->
        </div>
        
        <!-- 编辑课程对话框 -->
        <MessageDialog ref="editCourseDialog">
            <template v-slot:title>
                <span>创建课程</span>
            </template>
            <template v-slot:content>
                <div class="dialogContent">
                    <form>
                        <div class="inputBox">
                            <span>课程名称：</span>
                            <input type="text" v-model="editCourseData.name" placeholder="请输入课程名称" />
                        </div>
                        <div class="inputBox noPadding">
                            <span>课程封面：</span>
                            <div class="coverBox">
                                <!-- 封面预览 -->
                                <div class="cover">
                                    <img :src="editCourseData.cover" alt="" />
                                </div>
                                <!-- 选择文件 -->
                                <div class="upload" @click="openImageProcessingDialog">
                                    <span class="iconfont icon-likesprogramshangchuan"></span>
                                    <span class="uploadText">上传图片</span>
                                </div>
                            </div>
                        </div>
                        <div class="inputBox noPadding">
                            <span>课程描述：</span>
                            <textarea type="text" v-model="editCourseData.desc" @input="removeNewLines('desc')" placeholder="请输入课程描述" />
                        </div>
                        <div class="inputBox">
                            <span>课程难度：</span>
                            <div class="typeBox">
                                <div class="typeItem" v-for="difficulty in difficultyList" :class="{ 'select': editCourseData.difficulty == difficulty.difficultyId }" :key="difficulty.difficultyId" @click="difficultyClick(difficulty)">
                                    {{ difficulty.difficultyName }}
                                </div>
                            </div>
                        </div>
                        <div class="inputBox">
                            <span>课程类型：</span>
                            <div class="typeBox listBox slectList">
                                <div class="typeItem" v-for="type in editCourseData.selectTypeList" :key="type.typeId">
                                    {{ type.typeName }}
                                </div>
                            </div>
                            <div class="button" @click="showSelectLabelDialog('type')">选择类型</div>
                        </div>
                        <div class="inputBox">
                            <span>课程标签：</span>
                            <div class="typeBox listBox slectList">
                                <div class="typeItem" v-for="label in editCourseData.selectLabelList" ::key="label.labelId" @click="labelClick(label)">
                                    {{ label.labelName }}
                                </div>
                            </div>
                            <div class="button" :class="{ 'disable': editCourseData.selectTypeList.length <= 0 }" @click="showSelectLabelDialog('label')">选择标签</div>
                        </div>
                    </form>
                </div>
            </template>
            <template v-slot:footer>
                <div class="dialogFooterButton" @click="closeEditCourseDialog">
                    <span class="line">取消</span>
                </div>
                <div class="dialogFooterButton" @click="createCourseData">
                    <span>确认</span>
                </div>
            </template>
         </MessageDialog>

         <!-- 图片编辑对话框 -->
        <ImageProcessingDialog ref="imageProcessingDialog"
            :width="300" :height="150"
            :previeWidth="300" :previeHeight="150"
            :previeRadius="'5px'"
            @returnImage="returnImage"
        />

        <!-- 选择标签对话框 -->
        <MessageDialog ref="selectLabelDialog">
            <template v-slot:title>
                <span>{{ selectLabelDialogData.title }}</span>
            </template>
            <template v-slot:content>
                <div class="dialogContent">
                    <form>
                        <div class="inputBox">
                            <span>搜索内容：</span>
                            <input type="text" v-model="editCourseData.name" placeholder="请输入名称" />
                            <div class="button disable">搜索</div>
                        </div>
                        <!-- 选择类型 -->
                        <div class="selectType" v-if="selectLabelDialogData.type == 'type'">
                            <div class="inputBox noPadding">
                                <span>所有类型：</span>
                                <div class="typeBox listBox maxType allType">
                                    <div class="typeItem" v-for="type in typeList" :class="{ 'select': isSelect(type.typeId, 'type') }" :key="type.typeId" @click="typeClick(type)">
                                        {{ type.typeName }}
                                    </div>
                                </div>
                            </div>
                            <div class="inputBox noPadding">
                                <span>已选类型：</span>
                                <div class="typeBox listBox slectList maxType">
                                    <div class="typeItem" v-for="type in editCourseData.selectTypeList" :key="type.typeId" @click="typeClick(type)">
                                        {{ type.typeName }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 选择标签 -->
                        <div class="selectLabel" v-else>
                            <div class="inputBox noPadding">
                                <span>所有标签：</span>
                                <div class="typeBox listBox maxType allType">
                                    <div class="typeItem" v-for="label in labelList" :class="{ 'select': isSelect(label.labelId, 'label') }" :key="label.labelId" @click="labelClick(label)">
                                        {{ label.labelName }}
                                    </div>
                                </div>
                            </div>
                            <div class="inputBox noPadding">
                                <span>已选标签：</span>
                                <div class="typeBox listBox slectList maxType">
                                    <div class="typeItem" v-for="label in editCourseData.selectLabelList" :key="label.labelId" @click="labelClick(label)">
                                        {{ label.labelName }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </template>
            <template v-slot:footer>
                <div class="dialogFooterButton" @click="closeSelectLabelDialog()">
                    <span class="line">取消</span>
                </div>
                <div class="dialogFooterButton" @click="closeSelectLabelDialog(true)">
                    <span>确认</span>
                </div>
            </template>
        </MessageDialog>

        <!-- 消息对话框 -->
        <MessageDialog ref="messageDialog">
            <template v-slot:title>
                <span>{{ messageDialogData.title }}</span>
            </template>
            <template v-slot:content>
                <div class="dialogContent">
                    <div class="messageBox" :class="messageDialogData.type">
                        <div class="message" v-for=" message in messageDialogData.message">{{ message }}</div>
                    </div>
                </div>
            </template>
            <template v-slot:footer>
                <div class="dialogFooterButton" @click="closeMessage">
                    <span class="line">取消</span>
                </div>
                <div class="dialogFooterButton" @click="closeMessage">
                    <span>确认</span>
                </div>
            </template>
        </MessageDialog>
    </div>
</template>

<script lang="ts">
import { onMounted, ref } from 'vue';
import MessageDialog from '@/components/MessageDialog.vue';
import ImageProcessingDialog  from '@/components/ImageProcessingDialog.vue';
import { NewCourse, CourseShow, courseTypeApi, courseApi } from '@/api/course/Course';
import { courseCover } from '@/types/Base64Image'
import CourseCard from '@/components/course/CourseCard.vue';
import { baseUrl } from '@/util/request';
import { userApi } from '@/api/Users';
import { CourseDifficulty, CourseLabel, CourseType } from '@/types/Course';
export default {
    name: 'myCourseView',
}
</script>

<script setup lang="ts">
    // 自动绑定分页组件
    // const pagination = ref();
    // const currentPage = ref(1);
    // const pageSize = ref(10);
    // const total = ref(0);

    // 课程筛选条件
    const courseFilter = ref('all');
    // 课程列表
    const courseList = ref([]);

    const getFilterCourse = async () => {
        if(courseFilter.value == 'create') // 我创建的课程
        {
            // 获取我的和我加入的课程
            userApi.course.getCreateCourse().then(res => {
                courseList.value = res;
            });
        }
        else if(courseFilter.value == 'join') // 我加入的课程
        {
            // 获取我的和我加入的课程
            userApi.course.getJoinCourse().then(res => {
                courseList.value = res;
            });
        }
        else
        {
            // 获取我创建的课程
            const createCourseList = await userApi.course.getCreateCourse();

            // 获取我加入的课程
            const joinCourseList = await userApi.course.getJoinCourse();

            // 合并两个列表
            courseList.value.push(...createCourseList, ...joinCourseList);
        }
        
    }

    // 编辑课程对话框
    const editCourseDialog = ref();
    const editCourseData = ref({
        id: 0,      // 课程ID
        name: '',   // 课程名称
        cover: courseCover(),  // 封面
        difficulty: 1,
        desc: '',   // 描述
        selectTypeList: [],       // 类型
        selectLabelList: [],        // 标签
        price: 0    // 价格
    });

    // 关闭编辑课程对话框
    const closeEditCourseDialog = () => {
        editCourseDialog.value.Close();
        editCourseData.value = {
            id: 0,      // 课程ID
            name: '',   // 课程名称
            cover: courseCover(),  // 封面
            difficulty: 1,
            desc: '',   // 描述
            selectTypeList: [],       // 类型
            selectLabelList: [],        // 标签
            price: 0    // 价格
        }
    }

    // 创建课程对话框
    const createCourse = () => {
        // 获取课程难度列表
        courseTypeApi.getDifficulty().then(res => {
            difficultyList.value = res;
            editCourseDialog.value.ShowModal();
        });
    }

    // 去除课程描述中换行符的函数
    const removeNewLines = (field: string) => {
        editCourseData.value[field] = editCourseData.value[field].replace(/\r?\n/g, '');
    };

    // 难度列表
    const difficultyList = ref<CourseDifficulty[]>([]);

    // 课程类型列表
    const typeList = ref<CourseType[]>([]);

    // 课程标签列表
    const labelList = ref<CourseLabel[]>([]);

    onMounted(() => {
        getFilterCourse();
    });

    // 选择标签对话框
    const selectLabelDialog = ref(null);
    const selectLabelDialogData = ref({
        title: '选择课程类型',
        type: 'type',
        listData: []
    });

    // 得到 Id 列表
    const getIds = (type?: string): number[] => {
        if(type == 'type') return editCourseData.value.selectTypeList.map(item => item.typeId);
        else return editCourseData.value.selectLabelList.map(item => item.labelId);
    }

    // 判断是否选择
    const isSelect = (id: number, type?: string) => {
        if(type == 'type') return editCourseData.value.selectTypeList.some(item => item.typeId === id);
        else return editCourseData.value.selectLabelList.some(item => item.labelId === id);
    };

    // 打开选择框
    const showSelectLabelDialog = (type?: string) => {
        if(type == "type")
        {
            selectLabelDialogData.value.title = "选择课程类型";
            selectLabelDialogData.value.type = "type";
            // 获取课程类型列表
            courseTypeApi.getType().then(res => {
                typeList.value = res;
                // 从已选择的列表中去除 不存在的
                editCourseData.value.selectTypeList = editCourseData.value.selectTypeList.filter(item => 
                    typeList.value.some(type => type.typeId === item.typeId)
                );
                // 保存原有列表
                selectLabelDialogData.value.listData = JSON.parse(JSON.stringify(editCourseData.value.selectTypeList));
                // 打开对话框
                selectLabelDialog.value.ShowModal();
            });
        } else {
            selectLabelDialogData.value.title = "选择课程标签";
            selectLabelDialogData.value.type = "label";
            // 获取课程标签列表
            courseTypeApi.getLabelByList(getIds('type')).then(res => {
                labelList.value = res;
                // 从已选择的列表中去除 不存在的
                editCourseData.value.selectLabelList = editCourseData.value.selectLabelList.filter(item => 
                    labelList.value.some(label => label.labelId === item.labelId)
                );
                // 保存原有列表
                selectLabelDialogData.value.listData = JSON.parse(JSON.stringify(editCourseData.value.selectLabelList));
                // 打开对话框
                selectLabelDialog.value.ShowModal();
            });
        }
    };

    // 难度选择
    const difficultyClick = (difficulty: any) => {
        editCourseData.value.difficulty = difficulty.difficultyId;
    };

    // 类型选择
    const typeClick = (type: any) => {
        if (!isSelect(type.typeId, 'type'))
        {
            editCourseData.value.selectTypeList.push(
                {
                    typeId: type.typeId,
                    typeName: type.typeName
                }
            );
        }
        else
        {
            editCourseData.value.selectTypeList = editCourseData.value.selectTypeList.filter(item => item.typeId !== type.typeId);
        }
    };

    // 标签选择
    const labelClick = (label: any) => {
        if (!isSelect(label.labelId))
        {
            editCourseData.value.selectLabelList.push(
                {
                    labelId: label.labelId,
                    labelName: label.labelName
                }
            );
        }
        else
        {
            editCourseData.value.selectLabelList = editCourseData.value.selectLabelList.filter(item => item.labelId !== label.labelId);
        }
    };

    // 关闭选择对话框
    const closeSelectLabelDialog = (save?: boolean) => {
        if(selectLabelDialogData.value.type == 'type')
        {
            if(!save) editCourseData.value.selectTypeList = selectLabelDialogData.value.listData;
            else
            {
                // 获取课程标签列表
                courseTypeApi.getLabelByList(getIds('type')).then(res => {
                    labelList.value = res;
                    // 从已选择的列表中去除 不存在的
                    editCourseData.value.selectLabelList = editCourseData.value.selectLabelList.filter(item => 
                        labelList.value.some(label => label.labelId === item.labelId)
                    );
                    // 保存原有列表
                    selectLabelDialogData.value.listData = editCourseData.value.selectLabelList;
                });
            }
        }
        else
        {
            if(!save) editCourseData.value.selectLabelList = selectLabelDialogData.value.listData;
        }
        selectLabelDialogData.value.listData = [];
        // 打开对话框
        selectLabelDialog.value.Close();
    }

    // 创建课程
    const createCourseData = async () => {
        let newCourse: NewCourse = {
            courseName: editCourseData.value.name,
            courseDifficultyId: editCourseData.value.difficulty,
            courseDescription: editCourseData.value.desc,
            userId: 2,
            courseType: getIds('type'),
            courseLabel: getIds(),
            coverData: editCourseData.value.cover,
        }
        // 表单验证
        if(!newCourse.courseName && newCourse.courseName.length <= 0)
        {
            showMessage('创建失败', ['请输入课程名称！'], 'failure');
            return;
        }
        if(getIds('type').length <= 0)
        {
            showMessage('创建失败', ['请选择至少一个课程类型！'], 'failure');
            return;
        }
        if(getIds().length <= 0)
        {
            showMessage('创建失败', ['请选择至少一个课程标签！'], 'failure');
            return;
        }
        courseApi.createCourse((newCourse)).then(res => {
            if(res.code == 200)
            {
                closeEditCourseDialog(); // 关闭对话框
                showMessage('创建成功', ['课程创建成功！'], 'success');
            } else {
                showMessage('创建失败', ['课程创建失败！', res.message], 'failure');
            }
        });
    };

    // 图片编辑框
    const imageProcessingDialog = ref();
    // 打开图片编辑框
    const openImageProcessingDialog = () => {
        imageProcessingDialog.value.Show();
    };
    // 返回图片
    const returnImage = (image) => {
        editCourseData.value.cover = image;
    };

    // 消息对话框
    const messageDialog = ref(null);
    const messageDialogData = ref({
        title: '',
        message: [''],
        type: 'success',
    });
    const showMessage = (title: string, message: string[], type: string) => {
        messageDialogData.value = {title, message, type};
        messageDialog.value.ShowModal();
    }
    const closeMessage = () => {
        messageDialog.value.Close();
    }
</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.myCourseView {
    width: 100%;
    height: 100%;
}

.myCourseView .title {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 筛选 */
.myCourseView .title .screen {
    display: flex;
    justify-content: center;
    align-items: center;
}
.myCourseView .title .screen .screenText {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    padding-right: 15px;
    color: rgba(100, 100, 100, 1);
}
.myCourseView .title .screen .filter {
    display: flex;
    justify-content: center;
    align-items: center;
}
.myCourseView .title .screen .filter .filterItem {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 筛选项 */
.myCourseView .title .screen .filter .filterItem label {
    padding: 0px 15px;
    width: 100%;
    height: 35px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.myCourseView .title .screen .filter .filterItem label input {
    width: 10px;
    height: 10px;
}
.myCourseView .title .screen .filter .filterItem label input:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 8px;
  font-weight: bold;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 1);
  outline: 2px solid rgba(180, 180, 180, 1);
}
.myCourseView .title .screen .filter .filterItem label input:checked:before {
  content: "\2713";
  color: rgba(65, 185, 255, 1);
  outline: 2px solid rgba(65, 185, 255, 1);
}
.myCourseView .title .screen .filter .filterItem label span {
    padding-left: 6px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 按钮 */
.myCourseView .title .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}
.myCourseView .title .buttons .button {
    padding: 5px 10px;
    font-size: 14px;
    display: flex;
    margin-left: 15px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: rgba(65, 185, 255, 1);
    color: rgba(255, 255, 255, 1);
}
.myCourseView .title .buttons .button .iconfont {
    margin-right: 5px;
    font-size: 18px;
}
.myCourseView .title .buttons .button:hover {
    background-color: rgba(65, 185, 255, .8);
}
.myCourseView .title .buttons .button:active {
    background-color: rgba(65, 185, 255, 1);
    color: rgba(255, 255, 255, .8);
    transition: .1s all;
}

/* 内容 */
.myCourseView .content {
    width: 100%;
    height: calc(100% - 40px);
}
.myCourseView .content .courseList, .myCourseView .content .empty {
    width: 100%;
    margin: 10px 0px;
    height: calc(100% - 52px);
}
.myCourseView .content .courseList {
    height: calc(100% - 15px);
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.myCourseView .content .courseGrid {
    width: calc(100% - 20px);
    padding: 10px 0px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 30px 0px;
    justify-items: center;
}
.myCourseView .content .empty {
    font-size: 32px;
    font-weight: bold;
	font-family: "artisticFonts";
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(180, 180, 180, 1);
}

/* 分页 */
.myCourseView .content .pagination {
    width: 100%;
    height: 32px;
    overflow: hidden;
}

/* 编辑课程对话框 */
.dialogContent form {
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.dialogContent form .inputBox {
    width: 550px;
    padding: 10px 0px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialogContent form .inputBox.noPadding {
    padding: 10px 0px;
    align-items: flex-start;
}

/* 输入框 */
.dialogContent form .inputBox span {
    min-width: 80px;
}
.dialogContent form .inputBox input, .dialogContent form .inputBox textarea {
    width: 100%;
    height: 35px;
    font-size: 16px;
    border: 2px solid rgba(200, 200, 200, 1);
    border-radius: 5px;
    padding: 0px 10px;
    outline: none;
}
.dialogContent form .inputBox.noPadding textarea {
    height: 100px;
    resize: none; /* 禁止调整大小 */
    padding: 3px 10px;
    line-height: 28px;
}
.dialogContent form .inputBox input:focus, .dialogContent form .inputBox textarea:focus {
    border: 2px solid rgba(65, 185, 255, 1);
}

.dialogContent form .inputBox input, .dialogContent form .inputBox .typeBox {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    padding: 0px 10px;
    outline: none;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.dialogContent form .inputBox input {
    height: 35px;
    border: 2px solid rgba(200, 200, 200, 1);
}
.dialogContent form .inputBox .typeBox {
    min-height: 40px;
    max-height: 80px;
    resize: none; /* 禁止调整大小 */
    padding: 3px 10px;
    line-height: 28px;
}
.dialogContent form .inputBox .typeBox.maxType {
    max-height: 250px;
}
.dialogContent form .inputBox .typeBox.slectList {
    max-height: 150px;
}
.dialogContent form .inputBox input:focus {
    border: 2px solid rgba(65, 185, 255, 1);
}
.dialogContent form .inputBox .listBox {
    border: 2px solid rgba(200, 200, 200, 1);
}

/* 列表 */
.dialogContent form .inputBox .typeBox .typeItem {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 30px;
    font-size: 14px;
    border-radius: 10px;
    border: 2px solid rgba(200, 200, 200, 1);
}
.dialogContent form .inputBox .typeBox.slectList .typeItem {
    color: rgba(65, 185, 255, 1);
    border: 2px solid rgba(65, 185, 255, 1);
}
.dialogContent form .inputBox .typeBox .typeItem:hover {
    color: rgba(65, 185, 255, 1);
    border: 2px solid rgba(65, 185, 255, 1);
}
.dialogContent form .inputBox .typeBox .typeItem.select {
    color: rgb(255, 255, 255);
    border: 2px solid rgba(65, 185, 255, 1);
    background: rgba(65, 185, 255, 1);
}

/* 封面上传 */
.dialogContent form .inputBox .coverBox {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.dialogContent form .inputBox .coverBox .cover {
    width: 300px;
    height: 150px;
    border: 2px solid rgba(200, 200, 200, 1);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialogContent form .inputBox .coverBox .upload {
    width: 150px;
    height: 150px;
    margin-left: 20px;
    border-radius: 5px;
    border: 2px solid rgba(200, 200, 200, 1);
    color: rgba(100, 100, 100, .6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: .3s all;
}
.dialogContent form .inputBox .coverBox .upload .iconfont {
    min-width: 0px;
    min-height: 0px;
    font-size: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialogContent form .inputBox .coverBox .upload .uploadText {
    height: 40px;
    min-width: 0px;
    min-height: 0px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialogContent form .inputBox .coverBox div:hover {
    border: 2px solid rgba(65, 185, 255, 1);
    color: rgba(65, 185, 255, 1);
}
.dialogContent form .inputBox .coverBox div:active {
    border: 2px solid rgba(65, 185, 255, .7);
    color: rgba(65, 185, 255, .7);
    transition: .1s all;
}

/* 表单按钮 */
.dialogContent form .inputBox .button {
    min-width: 100px;
    height: 35px;
    overflow: hidden;
    border-radius: 5px;
    margin-left: 10px;
    transition: .3s all;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
    background-color: rgba(65, 185, 255, 1);
}
/* 表单按钮 */
.dialogContent form .inputBox .button:hover {
    background-color: rgba(65, 185, 255, 0.8);
}

.dialogContent form .inputBox .button:active {
    transition: .1s all;
    background-color: rgba(65, 185, 255, 1);
}

/* 禁用按钮 */
.dialogContent form .inputBox .button.disable {
    color: aliceblue;
    background-color: rgba(180, 180, 180, 1);
}
.dialogContent form .inputBox .button.disable:hover {
    background-color: rgba(180, 180, 180, 0.8);
}
.dialogContent form .inputBox .button.disable:active {
    transition: .1s all;
    background-color: rgba(180, 180, 180, 1);
}

/* 对话框底部按钮 */
.dialogFooterButton {
    width: 100%;
    height: 65px;
    position: relative;
    display: flex;
    color: rgba(65, 185, 255, 1);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s all;
}
.dialogFooterButton:hover {
    background-color: rgba(200, 200, 200, .15);
}
.dialogFooterButton:active {
    transition: .1s all;
    background-color: rgba(220, 220, 220, .1);
}
.dialogFooterButton .line {
    width: 100%;
    border-right: 1px solid rgba(200, 200, 200, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.messageBox {
    padding: 10px;
}
.messageBox.success {
    color: rgba(65, 185, 255, 1);
}
.messageBox.failure {
    color: rgba(255, 0, 0, 1);
}
</style>